<!--
 * @Description: 所有课程
 * @Author: your name
 * @Date: 2024-05-28
 * @LastEditTime: 2024-05-28
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="courseCenter heart_w">
    <!-- 必看专区 -->
    <div class="must_lookarea">
      <div class="ml_header fl_ex">
        <span>必看专区</span>
      </div>

      <div class="ml_advertise fl_ex">
        <a :href="`#/course`" target="_blank">
          <img src="@/assets/images/adver_radio.jpg" alt="" />
        </a>
        <a :href="`#/bookList`" target="_blank">
          <img src="@/assets/images/adver_book.png" alt="" />
        </a>
      </div>

      <div class="ml_header fl_ex">
        <span>精选课程</span>
      </div>
    </div>

    <!-- 课程 -->
    <div class="block_flex" v-for="item in courseCenterList" :key="item.id">
      <div class="head_t fl_ex">
        <h3>{{ item.title }}</h3>
        <div class="more_g">
          <router-link to="/course">
            查看更多
            <i class="el-icon-arrow-right"></i>
          </router-link>
        </div>
      </div>

      <el-row>
        <el-col
          :span="6"
          v-for="item_childer in item.list"
          :key="item_childer.id"
        >
          <router-link
            :to="{ path: '/handpick_kc', query: { id: item_childer.id } }"
            target="_blank"
          >
            <el-image :src="item_childer.image"></el-image>
            <div>
              <div class="title">{{ item_childer.title }}</div>
              <div class="browse-money"></div>
              <div class="label-count">
                <div style="color: #ff6b00; font-size: 18px">
                  ￥{{ item_childer.price }}
                </div>
                <div class="money">{{ item_childer.buy_nums }} 人已学</div>
              </div>
            </div>
          </router-link>
        </el-col>
      </el-row>

      <!-- <router-link class="seeMore" to="/course" target="_blank">
        查看更多 <i class="el-icon-d-arrow-right"></i>
      </router-link> -->
    </div>
  </div>
</template>

<script>
import { getComboList, getComboListByTui } from '@/api/course.js'
export default {
  name: 'courseCenter',
  data() {
    return {
      courseCenterList: []
    }
  },
  created() {
    this.getComboList()
  },
  methods: {
    getComboList() {
      getComboListByTui({ cate_id: 1 }).then(({ data: data }) => {
        this.courseCenterList = data.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.fl_ex {
  display: flex;
  align-items: center;
}
.courseCenter {
  padding: 30px 0;
}

.must_lookarea {
  .ml_header {
    justify-content: center;

    span {
      margin: 0 5px;
      font-size: 18px;
      flex: 0.5;
      text-align: center;
      color: #333;
      font-weight: bold;
    }
    &::after {
      flex: 2;
      content: ' ';
      border-top: 1.5px solid #ddd;
      width: 200px;
      display: block;
    }

    &::before {
      flex: 2;
      content: ' ';
      border-top: 1.5px solid #ddd;
      width: 200px;
      display: block;
    }
  }

  .ml_advertise {
    justify-content: space-between;
    padding: 25px 0;

    a {
      width: 584px;
      height: 180px;
      display: inline-block;
      overflow: hidden;
      box-shadow: #ccc 0 0 10px;

      img {
        width: 100%;
        height: 100%;
        transition: 1s all ease;

        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}

.block_flex {
  padding: 30px 0;
  .seeMore {
    display: block;
    margin: 10px auto 0;
    width: 175px;
    color: #e7792b;
    height: 48px;
    text-align: center;
    line-height: 48px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid rgba(238, 238, 238, 1);
  }
  .el-col {
    margin-bottom: 14px;
    padding: 0 7px;
  }

  .el-row {
    margin-top: 20px;
    a {
      display: block;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      transition: 0.3s;

      .el-image {
        display: block;
        width: 100%;
        height: 160px;
      }

      .el-image + div {
        padding: 0 15px;
      }
    }
  }

  .el-row a:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 16px rgb(79 109 143 / 12%);
  }

  .label-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    border-top: 1px dashed #eee;
    font-size: 14px;
    color: #999;

    .actrie {
      display: flex;
      align-items: center;
      .el-image {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        margin-right: 5px;
      }
    }

    .money {
      font-size: 14px;
      color: #ff6b00;

      span {
        font-size: 18px;
      }
    }
  }

  .browse-money {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #666;

    .el-tag {
      height: 22px;
      padding-right: 9px;
      padding-left: 9px;
      border-color: rgba(44, 142, 255, 0.06);
      border-radius: 2px;
      background-color: rgba(44, 142, 255, 0.06);
      line-height: 20px;
      color: #2c8eff;
    }
  }

  .title {
    padding-top: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #333;
  }

  .head_t {
    justify-content: space-between;
    font-weight: bold;
    font-size: 24px;
    color: #333;
    padding-left: 8px;
    line-height: 48px;

    h3 {
      font-weight: bold;
      font-size: 18px;
      color: #333;
    }

    .more_g {
      flex: 2;
      text-align: right;

      a {
        font-size: 15px;
        font-weight: normal;
        color: #999;
        line-height: 34px;
      }
    }
  }

  .el-link.el-link--default:hover {
    color: #606266;
  }
}
</style>
